<template>
<div class="wrapper">
    <div class="container-fluid">
        <div class="page-title-box">
            <div class="btn-group ">
                <ol class="breadcrumb hide-phone p-0 m-0">
                    <li class="breadcrumb-item">
                        <router-link to="/">{{$t('breadcrumb.index')}}</router-link>
                    </li>
                    <li class="breadcrumb-item">
                        <router-link to="/account">{{$t('breadcrumb.account')}}</router-link>
                    </li>
                    <li class="breadcrumb-item active">{{$t('breadcrumb.account.binding')}}</li>
                </ol>
            </div>
        </div>
        <div class="row justify-content-center">
            <div id="main" class="card-box col-10">
                <div class="row justify-content-md-center">
                    <div class="col-5 align-self-center">
                        <div class="form-group float-right b_flex b_between b_topcenter">
                            <span>{{$t('btn.account.without')}}</span>
                            <button class="btn btn-link text-danger" @click="register()">{{$t('btn.account.opening')}}>></button>
                        </div>
                    </div>
                </div>
                <form>
                    <div class="row justify-content-md-center">
                        <div class="col-5">
                            <div class="form-group">
                                <label for="broker" class="col-form-label">{{$t('label.broker')}}</label>
                                <select class="custom-select" id="broker" name="brokerid"
                                        data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                                    <option value="" disabled selected>{{$t('label.select')}}</option>
                                    <option v-for="broker in brokers" :key="broker.id" :value="broker.id">
                                        {{broker.broker}}
                                    </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="account" class="col-form-label">{{$t('title.mt4')}}</label>
                                <input type="text" class="form-control" id="account" name="mtaccount"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                            <div class="form-group">
                                <label for="password" class="col-form-label">{{$t('label.password.trade')}}</label>
                                <input type="password" class="form-control" id="password" name="mtpassword"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                            <div class="form-group">
                                <label for="cpassword" class="col-form-label">{{$t('label.password.confirm')}}</label>
                                <input type="password" class="form-control" id="cpassword"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                                       data-parsley-equalto="#password" :data-parsley-equalto-message="$t('msg.password.confirm.fail')">
                            </div>
                            <div class="pull-right mt-1">
                                <router-link to="/account" class="btn btn-link text-secondary">{{$t('btn.return')}}</router-link>
                                <button type="button" class="btn btn-gradient" @click="binging($event)">{{$t('btn.ok')}}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="follow-me-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="follow-me-modal"
         data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <h2 class="text-center m-b-30">{{$t('msg.broker.fail')}}</h2>
                    <form class="form-horizontal">
                        <div class="form-group row">
                            <div class="col-12">
                                <div class="custom-control custom-radio custom-control-inline" v-for="broker in brokers" :key="broker.id">
                                    <input :id="'type'+broker.id" class="custom-control-input" type="radio"
                                           v-model="form.broker" :value="broker">
                                    <label class="custom-control-label" :for="'type'+broker.id">{{broker.broker}}</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <input type="hidden" :value="form.broker" data-parsley-required="true"
                                       :data-parsley-required-message="$t('msg.broker.fail')">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{$t('btn.return')}}</button>
                            <button type="button" class="btn btn-gradient ml-3" @click="goRegister($event)"
                                    v-if="!form.broker.register_url">{{$t('btn.account.open')}}
                            </button>
                            <a v-if="form.broker.register_url" target="_blank"
                               :href="form.broker.register_url" class="btn btn-gradient ml-3">{{$t('btn.account.open')}}</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "accountBinging",
    data() {
        return {
            brokers: [],
            form: {broker: ''},
            t: {
                "ok": this.$t('btn.ok'),
                "cancel": this.$t('btn.cancel'),
                "msg": this.$t('msg.copy.stop'),
                "msg_suc": this.$t('msg.ajax.success'),
                "msg_err": this.$t('msg.ajax.fail'),
                "continue": this.$t('btn.binding.continue'),
                "return": this.$t('btn.binding.return')
            }
        }
    },
    created() {
        const vm = this;
        const api = vm.api;
        const http = vm.$http;
        http.get(api + 'MtLogin/getbroker')
            .then(function (response) {
                const data = response.data;
                if ('0' === data.code) {
                    vm.brokers = data.data;
                }
            })
            .catch(function (error) {
                console.log(error)
            });
    },
    methods: {
        goRegister(event) {
            let $form = $(event.target).closest('form');
            if ($form.parsley().validate()) {
                $form.submit()
            }
        },
        register() {
            $('#follow-me-modal').modal('toggle');
        },
        binging: function (event) {
            const vm = this;
            let $form = $(event.target).closest('form');
            if ($form.parsley().validate()) {
                const api = vm.api;
                const http = vm.$http;

                http.post(api + 'MtLogin/savemtaccount', $form.serialize())
                    .then(function (response) {
                        const data = response.data;
                        if ('0' === data.code) {
                            swal({
                                title: vm.t.msg_suc,
                                icon: 'success',
                                buttons: {
                                    ok: {
                                        text: vm.t.continue,
                                        className: 'btn btn-gradient',
                                    },
                                    rt: {
                                        text: vm.t.return,
                                        className: 'btn btn-link text-secondary',
                                    }
                                }
                            }).then((value) => {
                                if (value === 'ok') {
                                    vm.$router.push('/follow-me/top')
                                } else {
                                    vm.$router.push('/account')
                                }
                            })
                        } else {
                            swal({
                                title: vm.t.msg_err,
                                text: data.msg,
                                icon: 'info',
                                button: {
                                    text: vm.t.ok,
                                    className: 'btn btn-gradient',
                                }
                            })
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            }
        }
    }
}
</script>